<template>
    <div class="modifyDrawer">
        <!-- wrapperClosable 点击遮罩层是否可以关闭弹窗 -->
        <el-drawer :visible.sync="drawer" :with-header="false" direction="rtl" :wrapperClosable="false">
            <div class="loading-flex-box" v-show="drawerLoadding">
                <dv-loading>加载中...</dv-loading>
            </div>
            <div class="headerBox">
                <div class="title">{{ `${Title}-详情` }}</div>
                <img class="closeIcon" @click="handleClose" :src="require('../../assets/img/icon_close.png')" />
            </div>
            <div class="contentBox">
                <!-- <slot></slot> -->
                <div class="delInfoBox">
                    <div class="title">数据总览</div>
                    <div class="list" v-if="detailInfo.infodel">
                        <div>
                            <span>学校名称</span>
                            <span>{{ detailInfo.infodel.schoolName }}</span>
                        </div>
                        <div>
                            <span>办理人数</span>
                            <span>{{ detailInfo.infodel.qqdhStudentCount }}</span>
                        </div>
                        <div>
                            <span>{{ `${selectType == 1 ? '总通话/次' : selectType == 2 ? '有效通话/次' : selectType == 3 ?
                                '短话单/次' : '无效通话/次'}` }}</span>
                            <span>{{ selectType == 1 ? detailInfo.infodel.callCount : selectType == 2 ?
                                detailInfo.infodel.successCount : selectType == 3
                                ? detailInfo.infodel.shortSuccessCount : detailInfo.infodel.failCount
                                }}</span>
                        </div>
                        <div>
                            <span>{{ `${selectType == 1 ? '平均通话/次' : selectType == 2 ? '平均有效通话/次' : selectType == 3 ?
                                '平均短话/次' : '平均无效通话/次'}` }}</span>
                            <span v-if="selectType == 1">
                                {{ fiterDate(detailInfo.infodel.callCount, detailInfo.infodel.qqdhStudentCount, 2)
                                }}
                            </span>
                            <span v-if="selectType == 2">
                                {{ fiterDate(detailInfo.infodel.successCount, detailInfo.infodel.qqdhStudentCount,
                                2) }}
                            </span>
                            <span v-if="selectType == 3">
                                {{ fiterDate(detailInfo.infodel.shortSuccessCount,
                                detailInfo.infodel.qqdhStudentCount,
                                2) }}
                            </span>
                            <span v-if="selectType == 4">
                                {{ fiterDate(detailInfo.infodel.failCount, detailInfo.infodel.qqdhStudentCount,
                                2) }}
                            </span>
                        </div>
                        <div>
                            <span>{{ `${selectType == 1 ? '设备平均通话/次' : selectType == 2 ? '设备平均有效通话/次' : selectType ==
                                3
                                ? '设备平均短话单/次' : '设备平均无效通话/次'}` }}</span>
                            <span v-if="selectType == 1">
                                {{ fiterDate(detailInfo.infodel.callCount, detailInfo.infodel.deviceCount,
                                2) }}
                            </span>
                            <span v-if="selectType == 2">
                                {{ fiterDate(detailInfo.infodel.successCount, detailInfo.infodel.deviceCount,
                                2) }}
                            </span>
                            <span v-if="selectType == 3">

                                {{ fiterDate(detailInfo.infodel.shortSuccessCount, detailInfo.infodel.deviceCount,
                                2) }}
                            </span>
                            <span v-if="selectType == 4">
                                {{ fiterDate(detailInfo.infodel.failCount, detailInfo.infodel.deviceCount,
                                2) }}
                            </span>
                        </div>
                    </div>
                    <div class="title">{{ `${selectType == 1 ? '总通话' : selectType == 2 ? '有效话单' : selectType == 3 ?
                        '短话单' :
                        '无效通话'}` }}汇总统计</div>
                    <div class="chartStaty">
                        <div class="topFlex">
                            <div>总通话汇总统计</div>
                        </div>
                        <div class="botFlex">
                            <div id="chartDraw"></div>
                            <div class="itemFlex">
                                <div class="item">
                                    <div>昨日同时段通话次数</div>
                                    <div>{{ `${selectType == 1 ? schoolCallTotalDay.preDayCall.callCount : selectType ==
            2 ?
            schoolCallTotalDay.preDayCall.successCount
            :
            selectType == 3 ?
                schoolCallTotalDay.preDayCall.shortSuccessCount :
                schoolCallTotalDay.preDayCall.failCount}`
                                        }}</div>
                                </div>
                                <div class="item">
                                    <div>近一周通话次数</div>
                                    <div>{{ `${selectType == 1 ? schoolCallTotalDay.weekCall.callCount : selectType == 2
            ?
            schoolCallTotalDay.weekCall.successCount
            :
            selectType == 3 ?
                schoolCallTotalDay.weekCall.shortSuccessCount :
                schoolCallTotalDay.weekCall.failCount}`
                                        }}</div>
                                </div>
                                <div class="item">
                                    <div>近一月通话次数</div>
                                    <div>{{ `${selectType == 1 ? schoolCallTotalDay.monthCall.callCount : selectType ==
            2 ?
            schoolCallTotalDay.monthCall.successCount
            :
            selectType == 3 ?
                schoolCallTotalDay.monthCall.shortSuccessCount :
                schoolCallTotalDay.monthCall.failCount}`
                                        }}</div>
                                </div>
                                <div class="item">
                                    <div>{{ datevalue }}</div>
                                    <div>
                                        <span>{{ `${selectType == 1 ? schoolCallTotalDay.theDayCall.callCount :
            selectType ==
                2 ?
                schoolCallTotalDay.theDayCall.successCount
                :
                selectType == 3 ?
                    schoolCallTotalDay.theDayCall.shortSuccessCount :
                    schoolCallTotalDay.theDayCall.failCount}`
                                            }}</span>
                                        <img v-show="schoolPercentageRate"
                                            :src="schoolPercentageRate && schoolPercentageRate.includes('+') ? require('../../assets/img/up.png') : require('../../assets/img/down.png')" />
                                        <span v-show="schoolPercentageRate"
                                            :style="'color:' + (schoolPercentageRate && schoolPercentageRate.includes('+') ? '#1EF8AD' : '#FB1E1D') + ';'">较昨日{{
            schoolPercentageRate }}%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="title">{{ `设备通话统计（${detailInfo.infodel.deviceCount}台）` }}</div>
                    <div class="cardBox" v-if="detailInfo.deviceInfo.length > 0">
                        <div class="card_items" v-for="(item, index) in detailInfo.deviceInfo" :key="index">
                            <div class="card_header">{{ item.phoneName }}</div>
                            <div class="card_body">
                                <div class="text_item">
                                    <div>{{ selectType == 1 ? item.callCount : selectType == 2 ?
            item.successCount : selectType == 3
                ? item.shortSuccessCount : item.failCount
                                        }}</div>
                                    <div>{{ `${selectType == 1 ? '总通话/次' : selectType == 2 ? '有效通话/次' : selectType == 3
            ?
            '短话单/次' : '无效通话/次'}` }}</div>
                                </div>
                                <div class="text_item">
                                    <div v-if="selectType == 1">
                                        {{ fiterDate(item.callCount, item.deviceCallUserCount, 2) }}
                                    </div>
                                    <div v-if="selectType == 2">
                                        {{ fiterDate(item.successCount, item.deviceCallUserCount, 2) }}
                                    </div>
                                    <div v-if="selectType == 3">
                                        {{ fiterDate(item.shortSuccessCount, item.deviceCallUserCount, 2) }}
                                    </div>
                                    <div v-if="selectType == 4">
                                        {{ fiterDate(item.failCount, item.deviceCallUserCount, 2) }}
                                    </div>
                                    <div>
                                        {{ `${selectType == 1 ? '平均通话/次' : selectType == 2 ? '平均有效通话/次' : selectType
            == 3 ? '平均短话/次' : '平均无效通话/次'}` }}
                                        <el-tooltip class="item" :content="`${selectType == 1 ? '总通话次数' : selectType == 2 ? '有效通话总次数' : selectType
            == 3 ? '短话单总次数' : '无效通话总次数'}/设备使用的总人数`" placement="top-start">
                                            <img :src="require('../../assets/img/icon_tips.png')" />
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div class="text_item">
                                    <div v-if="selectType == 1">
                                        {{ fiterDate(item.callSecond, item.callCount, 2) }}
                                    </div>
                                    <div v-if="selectType == 2">
                                        {{ fiterDate(item.callSecond, item.successCount, 2) }}
                                    </div>
                                    <div v-if="selectType == 3">
                                        {{ fiterDate(item.shortSuccessCallSecond, item.shortSuccessCount, 2) }}
                                    </div>
                                    <div v-if="selectType == 4">
                                        -
                                    </div>
                                    <!-- <div>总平均通话/秒</div> -->
                                    <div>
                                        {{ `${selectType == 1 ? '平均通话/秒' : selectType == 2 ? '平均有效通话/秒' : selectType ==
                                        3 ? '平均短话单/秒' : '平均无效通话/秒'}` }}
                                        <el-tooltip v-if="selectType != 4" class="item" :content="`${selectType == 1 ? '总通话时长' : selectType == 2 ? '有效通话总时长' : selectType
            == 3 ? '短话单总时长' : ''}/${selectType == 1 ? '总通话次数' : selectType == 2 ? '有效通话总次数' : selectType
                == 3 ? '短话单总次数' : ''}`" placement="top-start">
                                            <img :src="require('../../assets/img/icon_tips.png')" />
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    name: 'Drawer',
    props: {
        drawer: {
            type: Boolean,
            default: false
        },
        Title: {
            type: String,
            default: ''
        },
        selectType: {
            type: Number,
            default: ''
        },
        detailInfo: {
            type: Object,
            default: {}
        },
        // 某个学校某天的汇总统计数据
        schoolCallTotalDay: {
            type: Object,
            default: {}
        },
        // 查询的日期
        datevalue: {
            type: String,
            default: ''
        },
        schoolRate: {
            type: Number,
            default: 0
        },
        schoolPercentageRate: {
            type: String,
            default: ''
        },
        drawerLoadding: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            chartRef: null
        }
    },
    methods: {
        handleClose() {
            this.$emit('handleClose')
        },
        fiterDate(data1, data2, num) {
            if (Number(data2) === 0) {
                return '0.00'
            } else {
                return (Number(data1) /
                    Number(data2)).toFixed(num)
            }
        },

        // 获取进度条图片
        async getChart() {
            var that = this
            that.$nextTick(() => {
                that.chartRef = that.$echarts.init(document.getElementById('chartDraw'))
                var option = {
                    title: {
                        show: true,
                        text: that.schoolRate + "%",
                        x: "center",
                        y: "center",// 通过x,y将标题(进度)定位在圆环中心
                        textStyle: {
                            fontSize: "16",
                            color: "#ffffff"
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{d}%",
                        show: false,
                    },
                    legend: {
                        orient: "vertical",
                        x: "left",
                        show: false,
                    },
                    series: {
                        name: "",
                        type: "pie",
                        radius: ['78%', '100%'], //图形大小

                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: that.schoolRate,
                                name: "",
                                itemStyle: {
                                    color: "#F6C748",
                                    borderRadius: 5, // 设置圆角半径
                                },
                            },
                            {
                                value: (100 - Number(that.schoolRate)).toFixed(2),
                                name: "",
                                itemStyle: {
                                    color: "#0A1F48",//透明色，也可以设置把其他颜色
                                },
                            },
                        ],
                    },
                }
                that.chartRef.setOption(option, true)
            })
        },
    }
}
</script>
<style lang="less" scoped>
.modifyDrawer {
    color: #ffffff;

    /deep/ .el-drawer {
        width: 440px !important;
    }

    /deep/ .el-drawer__wrapper {
        z-index: 9999;
    }

    /deep/ .el-drawer__body {
        background: #0A1F48;
    }

    .title {
        font-size: 18px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #4BEEFF;
        padding-left: 24px;
    }

    .contentBox {
        height: calc(100vh - 80px);
        overflow-y: auto;

        .delInfoBox {
            padding: 24px;

            .title {
                padding-left: 0px;
            }

            .list {
                margin-bottom: 24px;

                div {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 15px;
                    padding: 20px 0;
                    border-bottom: 1px solid #243E7A;

                    span {
                        display: inline-block;
                    }

                    span:last-of-type {
                        flex: 1;
                        text-align: right;
                    }
                }
            }

            .cardBox {
                margin-top: 20px;

                .card_items {
                    background: #0F2A5B;
                    border-radius: 10px;
                    margin-bottom: 20px;

                    .card_header {
                        padding: 15px 24px;
                        font-size: 15px;
                        font-family: Source Han Sans SC, Source Han Sans SC;
                        border-bottom: 1px solid #243E7A;
                    }

                    .card_body {
                        padding: 20px 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .text_item:first-of-type {
                            flex: 0.8;
                        }

                        .text_item {
                            flex: 1;
                            text-align: center;

                            div:first-of-type {
                                margin-bottom: 5px;
                            }

                            div:last-of-type {
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                img {
                                    margin-left: 5px;
                                    width: 16px;
                                    height: 16px;
                                    cursor: pointer;
                                }
                            }
                        }
                    }

                }
            }
        }
    }

    .headerBox {
        height: 60px;
        display: flex;
        align-items: center;
        background-image: url('../../assets/img/tanchuangdraw.png');
        background-size: 100% 100%;
        position: relative;

        img.closeIcon {
            position: absolute;
            top: 19px;
            right: 20px;
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
    }

}

.chartStaty {
    width: 100%;
    background: #0F2A5B;
    border-radius: 10px;
    padding: 20px 15px;
    box-sizing: border-box;
    margin: 20px 0;

    .topFlex {
        display: flex;
        align-items: center;

        div:first-of-type {
            margin-left: 5px;
            flex: 1;
            text-align: left;
        }

        div:last-of-type {
            span {
                width: 90px;
            }
        }
    }

    .botFlex {
        display: flex;
        align-items: top;
        margin-top: 20px;

        #chartDraw {
            width: 76px;
            height: 76px;
            margin: 0 30px 0 5px;
        }

        .itemFlex {

            flex: 1;

            .item {
                width: 50%;
                display: inline-block;
                float: left;
                text-align: left;
                margin-bottom: 20px;

                div:first-of-type {
                    font-size: 12px;
                    color: #FFFFFF;
                    margin-bottom: 10px;
                }

                div:last-of-type {
                    font-weight: bold;
                    font-size: 18px;
                    color: #F6C748;
                    // display: flex;
                    // align-items: center;

                    span {
                        display: block;
                    }

                    span:last-of-type {
                        display: block;
                        font-size: 12px;
                        color: #F95B00;
                        font-weight: 400;
                        display: inline-block;
                        margin-left: 5px;
                    }
                }
            }

            .item:last-of-type {
                div:last-of-type {
                    line-height: 20px;
                }

                margin-bottom: 0px;
            }
        }
    }
}
// 滚动条
div /deep/ div::-webkit-scrollbar {
    width: 6Px !important;
    height: 6Px !important;
    display: block !important;
    border-radius: 4Px !important;
}

div /deep/ div::-webkit-scrollbar-thumb {
    border-radius: 4Px !important;
    background: #2E96FF !important;
}

div /deep/ div::-webkit-scrollbar-track {
    border-radius: 4Px !important;
    background: #1C3C93 !important;
}
</style>